<template>
    <div class="comment-container">
        <textarea class="mytext" placeholder="请输入要留言的内容（最多200字哦！）" maxlength="200" v-model="msg"></textarea>
        <div class="span-two">
            <span class="little-space">剩余可输入<span class="num">{{ num }}</span>字</span>
            <div class="btn-com">
            <Button type="primary" @click="postComment">发表评论</Button>
            </div>
        </div>
        <!-- 留言列表 -->
        <div class="cmt-list">
            <div class="cmt-list-item" v-for="(item, i) in commentList" :key="i">
                <div class="item-left">
                    <router-link :to="'/userInfo/' + item.users.uId">
                        <img :src="item.users.uAvatar" alt="">
                    </router-link>
                </div>
                <div class="item-right">
                    <p class="userName">
                        <router-link to="" class="myName">{{item.users.uName}}</router-link>
                        <span class="cmtTime"><span class="floor">第{{i+1}}楼</span> {{item.gcTime | dataFormat}}</span>
                    </p>
                    <p class="userCmt">{{item.gcContent}}</p>
                    <a-collapse defaultActiveKey="1" :bordered="false">
                        <a-collapse-panel :showArrow="false" header="回复" :key="1">
                            <textarea :placeholder="'回复 ' + item.users.uName" class="callback-text"></textarea>
                            <Button type="primary" size="small">提交</Button>
                        </a-collapse-panel>
                    </a-collapse>
                </div>
                <!-- <div v-if="item.chlid!=''">
                    <div class="cmt-list-item" v-for="(itemTwo, i2) in item.child" :key="i2">
                        <div class="item-left">
                            <router-link :to="'/userInfo/' + itemTwo.users.uId">
                                <img :src="itemTwo.users.uAvatar" alt="">
                            </router-link>
                        </div>
                        <div class="item-right">
                            <p class="userName">
                                <router-link to="" class="myName">{{itemTwo.users.uName}}</router-link>
                                <span class="cmtTime"><span class="floor">第{{i2+1}}楼</span> {{itemTwo.gcTime | dataFormat}}</span>
                            </p>
                            <p class="userCmt">{{itemTwo.gcContent}}</p>
                            <a-collapse defaultActiveKey="1" :bordered="false">
                                <a-collapse-panel :showArrow="false" header="回复" :key="1">
                                    <textarea :placeholder="'回复 ' + itemTwo.users.uName" class="callback-text"></textarea>
                                    <Button type="primary" size="small">提交</Button>
                                </a-collapse-panel>
                            </a-collapse>
                        </div>
                    </div>
                </div> -->
            </div>
            <!-- <div class="cmt-list-item">
                <div class="item-left">
                    <router-link to="">
                        <img src="https://thirdqq.qlogo.cn/g?b=oidb&k=ZDXvgx8VicLKHlJBEr5rHTw&s=100&t=1557128964" alt="">
                    </router-link>
                </div>
                <div class="item-right">
                    <p class="userName">
                        <router-link to="" class="myName">用户昵称</router-link>
                        <span class="cmtTime"><span class="floor">第1楼</span> 时间</span>
                    </p>
                    <p class="userCmt">用户评论内容</p>
                    <a-collapse defaultActiveKey="1" :bordered="false">
                        <a-collapse-panel :showArrow="false" header="回复" :key="1">
                            <textarea :placeholder="'回复 ' + '回复人昵称'" class="callback-text"></textarea>
                            <Button type="primary" size="small">提交</Button>
                        </a-collapse-panel>
                    </a-collapse>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'comment',
    data() {
        return {
            msg: '', // 评论输入的内容
            flag: false,
        }
    },
    methods: {
        // 发表评论
        postComment() {
            // this.$emit('func', this.msg)
            // this.msg = ''
        },
    },
    computed: {
        // 剩余可输入字数
        num() {
            if (this.msg.trim().length > 0) {
                // eslint-disable-next-line radix
                return parseInt(200 - this.msg.trim().length)
            }
            return 200
        },
    },
    props: ['commentList'],
}
</script>

<style lang="scss" scoped>
.comment-container{
    margin-top: 1.5rem;
    h5{
        margin-bottom: 0.9rem;
    }
    .mytext{
        padding: 10px 15px;
        outline: 0;
        width: 100%;
        font-size: 14px;
        margin:0;
        height:90px;
        background-image: url('../../../assets/imgs/comment.gif');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 250px 45px;
        border-radius: 3px;
    }
    .span-two{
        display: flex;
        justify-content: space-between;
        .little-space{
            font-size: 13px;
            color:#888;
            .num{
                color: #eb2f96;
            }
        }
        .btn-com{
            margin-top: 0.5rem;
        }
    }
    .cmt-list{
        margin: 1rem 0;
        .cmt-list-item{
            display: flex;
            justify-content: flex-start;
            // border-bottom: 1px solid #d8d8d8;
            padding: 0.6rem 0;
            .item-left{
                margin-right: 0.7rem;
                img{
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                }
            }
            .item-right{
                width: 100%;
                .userName{
                    color:#007bff;
                    margin-bottom: 0.5rem;
                    .myName {
                        margin-right: 20px;
                    }
                }
                .userCmt{
                    color:#222;
                    margin-bottom: 0.5rem;
                }
                .cmtTime{
                    font-size: 13px;
                    color:#555;
                    margin-right: 0.7rem;
                    .floor{
                        margin-right: 0.6rem;
                    }
                }
                .callback{
                    font-size: 14px;
                }
                .collapse{
                    margin-top: 0.6rem;
                }
                .callback-text{
                    outline:0;
                    border-radius: 3px;
                    width: 100%;
                    font-size: 13px;
                    margin-bottom: 0px;
                    padding:8px 14px;
                }
            }
        }
    }
}
</style>